<template>
  <div class="teaching-wrap">
    <!-- 首页banner -->
    <div class="teaching-banner">
      <no-ssr>
        <el-carousel ref="carousel" class="carousel" :autoplay="autoplaySlide" trigger="click" indicator-position="none" @change="changeCarousel" :initial-index="curActive">
          <el-carousel-item v-for="(item, index) in slideList" :key="index" class="carousel-item">
            <div :style="{background:`url(${item.imgUrl}) no-repeat center`}" class="fish-bg">
              <div class="banner-title">行业人才发展与课程关系逻辑图</div>
              <fish-bone :info="item.fish" class="fish-style"></fish-bone>
            </div>
          </el-carousel-item>
        </el-carousel>
      </no-ssr>
      <!-- 自定义指示器的内容 -->
      <div class="custom-indicatorz">
        <div class="custom-indicator">
          <div v-for="(item, index) in slideList" :key="index" class="indicator-content" :class="curActive===index?'activeStyle':''" @click="changeIndicator(index)">
            <img :src="item.icon">
            <p>{{item.text}}</p>
          </div>
        </div>
      </div>
      <div class="suspend-play" v-if="autoplaySlide" @click="stopPlay">
        <!-- 默认暂停按钮 -->
        <img src="/img/talents/home/suspend.png">
      </div>
      <div class="suspend-play" v-else @click="startPlay">
        <img src="/img/talents/home/play.png">
      </div>
    </div>
    <!-- 产业动态 -->
    <div class="industry-dynamic margin-align">
      <div class="industry-dynamic-top">
        <div class="main-title main-title-padding">产业动态</div>
        <div class="check-more" @click="goToDetail('./industry-dynamic')">查看更多<img src="/img/talents/home/right-arrow.png"></div>
      </div>
      <div class="industry-dynamic-content">
        <VueSlickCarousel :arrows="false" :dots="false" :slidesToShow="2" :rows="2" :slidesToScroll="1" :autoplay="true"  class="carousel-info">
          <div class="textAndPic" v-for="(dynamic,dynamicIndex) in homeIndustryList" :key="dynamicIndex" @click="goToDetail('/talents/news', dynamic.id, 'news')">
            <div class="text-info">
              <div class="text-title">{{dynamic.title}}</div>
              <div class="text-time">{{dynamic.updataTime}}</div>
            </div>
            <img :src="dynamic.imgUrl">
          </div>
        </VueSlickCarousel>
      </div>
    </div>
    <div class="margin-align">
      <!-- 生态体系 -->
      <div class="videoAndPic">
        <div class="videoz">
          <video
          muted
          class="video-style"
          id="ecosystemV"
          autoplay
          loop="loop"
          @click="singleClick"
          @dblclick="doubleClick"
          src="https://outin-4bf3d72759cd11e981c100163e1c9256.oss-cn-shanghai.aliyuncs.com/customerTrans/efb1024309651a534b625b5238653a63/453ddb8e-1799d3ab160-0004-5b34-5a5-a8cf9.mp4?OSSAccessKeyId=LTAIrkwb21KyGjJl&Signature=Ca%2BjDeX0ENo%2BFsONDPa%2BI9tlQU4%3D"></video>
          <img v-if="isShowVideoPlay" src="/img/talents/home/video-play.png" class="play" @click="playVideo">
        </div>
        <div class="pic-style">
          <div class="main-title main-title-margin">生态体系</div>
          <div class="pics">
            <img v-for="item in ecosystemPic" :key="item.title" :src="item.imgUrl">
          </div>
        </div>
      </div>
      <!-- 产业动态图片 -->
      <div class="pic-sort">
        <img :src="item.pic" :alt="item.title" v-for="item in industryDynamicsPic" :key="item.title" @click="goToDetail('/talents/specil')">
      </div>
      <!-- 企业服务/院校合作 -->
      <div class="companyAndCollege">
        <div class="total-pic" v-for="item in companyAndCollegePic" :key="item.title">
          <div class="main-title main-title-margin">{{item.title}}</div>
          <div class="pic-item">
            <img :src="pic" v-for="pic in item.picList" :key="pic">
          </div>
          <div class="concat" @click="goToContact">
            <span>我要合作</span>
            <img src="/img/talents/home/hezuo.png" class="hezuo">
            <img src="/img/talents/home/hezuo2.png" class="hezuo2">
          </div>
        </div>
      </div>
      <!-- 数据展示 -->
      <div class="show-data">
        <div class="main-title main-title-margin">厦门产业数字化人才培养基地成果展示数据</div>
        <div class="data-show-pic">
          <img :src="item" v-for="item in talentDataPic" :key="item">
        </div>
        <!-- <div class="show-data-pic">
          <div class="pic-left">
            <img :src="item" v-for="item in talentDataPic" :key="item">
          </div>
          <div class="pic-right">
            <div class="pic-textz" v-for="item in talentDataList" :key="item.title">
              <div class="pic-text">
                <div class="pic-data">{{item.title}}</div>
                <div class="pic-data">{{item.num}}</div>
              </div>
              <img :src="item.icon" class="pic-icon">
            </div>
          </div>
        </div> -->
      </div>
      <!-- 合作院校/合作企业 -->
      <div class="cooperation">
        <div class="cooperation-item">
          <div class="main-title main-title-margin">合作院校</div>
          <div class="cooperation-item-pic">
            <img :src="item" v-for="item in cooperationCollegePic" :key="item" @click="goToSchool('/talents/school-detail')">
            <div class="slick-slide"><div></div></div>
          </div>
        </div>
        <div class="cooperation-item">
          <div class="main-title main-title-margin">合作企业</div>
          <VueSlickCarousel :arrows="false" :dots="false" :slidesToShow="3" :rows="3" :slidesToScroll="1" :autoplay="true" class="cooperation-item-pic">
            <img :src="item" v-for="item in cooperationCompanyPic" :key="item" @click="goToDetail('/talents/company-detail')">
          </VueSlickCarousel>
        </div>
      </div>
    </div>
    <register v-if="isShowRegister" @closeDialog="closeDialog"></register>
    <no-ssr>
      <el-dialog class="submit-success-dialog" :show-close='false' :visible.sync="successDialog">
        <div class="submit-success"><img src="/img/talents/home/tijiaochengong.png">提交成功</div>
      </el-dialog>
    </no-ssr>
    <no-ssr>
      <!-- 首页进去自动显示弹窗 -->
      <el-dialog :show-close='false' :visible.sync="autoShowDialog" class="dialog-show">
        <div class="dialog-pic">
          <img src="/img/talents/home/tanchuang.png" class="pic"/>
          <img src="/img/talents/home/close.png" class="close" @click="closeAutoDialog">
        </div>
      </el-dialog>
    </no-ssr>
  </div>
</template>
<script>
import VueSlickCarousel from 'vue-slick-carousel'
import 'vue-slick-carousel/dist/vue-slick-carousel.css'
import talents from '@/api/talents'
import register from '@/components/talents/register'
var time = null;  //  在这里定义time 为null 单击或双击点击
import FishBone from '@/components/talents/fish-bone'
export default {
  layout: 'teach',
  data () {
    return {
      autoplaySlide: true, // 自动滚动
      slideList: talents.slideList, // 轮播图
      homeIndustryList: talents.homeIndustryList, // 产业动态
      industryDynamicsPic: talents.industryDynamicsPic, // 产业动态图一篇
      ecosystemPic: talents.ecosystemPic, // 生态体系
      companyAndCollegePic: talents.companyAndCollegePic, // 企业服务/院校合作
      talentDataPic: talents.talentDataPic, // 厦门产业数字化人才培养基地成果展示数据
      cooperationCollegePic: talents.cooperationCollegePic, // 合作院校
      cooperationCompanyPic: talents.cooperationCompanyPic, // 合作企业
      isShowRegister: false, // 是否显示注册组件
      successDialog: false, // 是否显示提交成功弹框
      autoplayVideo: true, // 默认自动播放视频
      isShowVideoPlay: false, // 是否显示播放按钮
      autoShowDialog: true, // 首页自动显示弹窗，10S关闭
      autoTime: null, // 首页自动显示弹窗定时器
      curActive: 0 // 当前显示的banner位置
    }
  },
  mounted () {
    this.playVideo() // 视频播放
    this.autoTime = setTimeout(() => { // 10S自动关闭
      this.autoShowDialog = false
    }, 10000)
  },
  components: { VueSlickCarousel, register, FishBone },
  methods: {
    // 跳转到详情页
    goToDetail (url, id, type) {
      if (type === 'news') { // 新闻
        this.$router.push({
          path: `/talents/news-detail/${id}`
        })
      } else {
        this.$router.push({
          path: url
        })
      }
    },
    // 学校
    goToSchool (url) {
      this.$router.push({
        path: url
      })
    },
    // 我要合作
    goToContact () {
      this.isShowRegister = true
    },
    // 注册子组件接收
    closeDialog (msg, type) {
      this.isShowRegister = msg
      if (type === 'success') {
        this.successDialog = true
        setTimeout(() => {
          this.successDialog = false
        }, 1000)
      }
    },
    // 停止播放
    stopPlay () {
      if(this.autoplaySlide){
        this.autoplaySlide = false;
			}
    },
    // 开始播放
    startPlay () {
      if(!this.autoplaySlide){
        this.autoplaySlide = true;
			}
    },
    // 播放视频
    playVideo () {
      document.getElementById('ecosystemV').play()
      this.isShowVideoPlay = false
    },
    // 单击
    singleClick () {
      clearTimeout(time);  //首先清除计时器
      time = setTimeout(() => {
        document.getElementById('ecosystemV').pause()
        this.isShowVideoPlay = true
      }, 300);   //大概时间300ms
    },
    // 双击
    doubleClick () {
      clearTimeout(time);  //清除
      this.showVideo()
      this.fullScreen()
    },
    // 全局播放视频
    showVideo () {
      let video = document.getElementById('ecosystemV');
      if (video.webkitRequestFullScreen) {
        video.webkitRequestFullScreen();
      } else if (video.mozRequestFullScreen) {
        video.mozRequestFullScreen();
      } else if (video.msRequestFullScreen) {
        video.msRequestFullScreen();
      } else if (video.RequestFullScreen) {
        video.RequestFullScreen();
      }
      video.play();
    },
    // 全屏显示
    fullScreen () {
      const documentEL = document.documentElement;
      if (documentEL.RequestFullScreen) {
        documentEL.RequestFullScreen();
      }
      //兼容火狐
      if (documentEL.mozRequestFullScreen) {
        documentEL.mozRequestFullScreen();
      }
      //兼容谷歌等可以webkitRequestFullScreen也可以webkitRequestFullscreen
      if (documentEL.webkitRequestFullScreen) {
        documentEL.webkitRequestFullScreen();
      }
      //兼容IE,只能写msRequestFullscreen
      if (documentEL.msRequestFullscreen) {
        documentEL.msRequestFullscreen();
      }
      if(typeof window.ActiveXObject != "undefined") {
        //for IE，这里其实就是模拟了按下键盘的F11，使浏览器全屏
         /* eslint-disable */
        const wscript = new ActiveXObject("WScript.Shell");
        if(wscript != null) {
            wscript.SendKeys("{F11}");
        }
      }
    },
    // 关闭自动显示弹窗
    closeAutoDialog () {
      this.autoShowDialog = false
    },
    // 获取banner位置
    changeCarousel (e) {
      this.curActive = e
    },
    // 切换banner指示器
    changeIndicator (index) {
      this.curActive = index
      // console.log(this.curActive)
      this.$refs.carousel.setActiveItem(index) // 切换banner
    }
  },
  destroyed () {
    clearTimeout(time) // 清除单击事件延时
    clearTimeout(this.autoTime) // 清除自动显示弹窗
  }
}
</script>
<style lang="stylus" scoped>
.teaching-wrap {
  padding-bottom: 60px;
  background-color: #F6F6F6
  .teaching-banner {
    position: relative;
    height: 947px
    .carousel {
      /deep/ .el-carousel__container {
        height: 947px
      }
      /deep/ .el-carousel__indicators--horizontal {
        display: flex;
        width: 100%;
        justify-content: center;
        background: rgba(255, 255, 255, 0.04)
        bottom: 0px
      }
      /deep/ .el-carousel__button {
        width: 300px;
        height: 150px;
        background: rgba(216, 216, 216, 0);
      }
      /deep/ .el-carousel__indicator--horizontal {
        padding: 0
      }
      /deep/ .el-carousel__button{
        opacity: 1 !important
      }
      /deep/ .el-carousel__indicator.is-active button {
        background: rgba(255, 255, 255, 0.12)
      }
      .fish-bg{
        position: relative;
        height:947px
      }
      .fish-style {
        position: absolute;
        height: 390px;
        top: 241px;
        left: 50%;
        margin-left: -600px;
      }
      .banner-title {
        width: 100%;
        text-align: center;
        position: absolute;
        top: 138px;
        font-size: 46px;
        font-weight: 500;
        color: #FFFFFF;
        letter-spacing: 5px;
      }
    }
    .custom-indicatorz {
      position: absolute;
      width: 100%;
      bottom: 0px;
      z-index: 99;
      background: rgba(255, 255, 255, 0.04)
    }
    .custom-indicator {
      display: flex;
      width: 1200px;
      margin: 0 auto;
      .indicator-content {
        width: 300px;
        height: 150px;
        text-align: center;
        opacity: 0.6;
        cursor: pointer;
        background: rgba(216, 216, 216, 0);
        img {
          margin-top: 46px
        }
        p {
          font-size: 18px;
          font-weight: 400;
          color: rgba(255, 255, 255, 0.6);
          margin-top: 17px;
        }
        &:hover {
          opacity: 1;
          p {
            color: #FFFFFF;
          }
        }
      }
      .activeStyle {
        opacity: 1;
        background: rgba(255, 255, 255, 0.12)
        p {
          color: #FFFFFF;
        }
      }
    }
    .suspend-play {
      position: absolute;
      right: 40px;
      bottom: 20px;
      width: 50px;
      height: 36px;
      background: rgba(0, 0, 0, 0.4);
      border-radius: 16px;
      border: 1px solid rgba(255, 255, 255, 0.4);
      z-index: 99;
      text-align: center;
      line-height: 36px;
      cursor: pointer
      img {
        width: 10px;
        height: 12px
      }
    }
  }
  .industry-dynamic {
    height: 430px;
    background: #FFFFFF;
    border-radius: 16px;
    position: relative;
    z-index: 99;
    margin-top: 30px;
    overflow: hidden
    .industry-dynamic-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      border-radius: 16px 16px 0px 0px
      .check-more {
        width: 101px;
        height: 26px;
        background: #4676FE;
        border-radius: 4px;
        font-size: 14px;
        font-family: SourceHanSansCN-Regular, SourceHanSansCN;
        font-weight: 400;
        color: #FFFFFF;
        display: flex;
        justify-content:center;
        align-items: center;
        margin-right: 20px;
        cursor:pointer
        &:hover {
          background: #1D45B8;
        }
        img {
          width: 5px;
          height: 8px;
          margin-left: 8px
        }
      }
    }
    .industry-dynamic-content {
      .carousel-info {
        display: inline-block;
        padding: 0 20px;
        /deep/ .slick-slide {
          div {
            width: 570px;
          }
        }
        /deep/ .slick-list {
          width: 1180px
        }
        .textAndPic {
          margin-top: 20px
          width: 570px;
          height: 154px;
          background: #FFFFFF;
          border-radius: 12px;
          border: 1px solid #F1F1F1;
          display: flex !important;
          align-items: center;
          justify-content: space-between;
          cursor: pointer
          .text-info {
            width: 338px;
            margin-left: 20px
            .text-title {
              width: 338px;
              font-size: 18px;
              font-family: SourceHanSansCN-Regular, SourceHanSansCN;
              font-weight: 400;
              color: #101010;
            }
            .text-time {
              width: 338px;
              font-family: SourceHanSansCN-Regular, SourceHanSansCN;
              font-weight: 400;
              color: #A1A1A1;
              margin-top: 38px
            }
          }
          img {
            width: 180px;
            height: 130px;
            margin-right: 12px
          }
        }
      }
    }
  }
  .pic-sort {
    display: inline-block;
    margin-top: 20px
    img {
      float:left;
      width: 285px;
      height: 98px;
      margin-right: 20px;
      cursor:pointer
      &:last-child {
        margin-right: 0
      }
    }
  }
  .videoAndPic {
    margin-top: 30px;
    display: inline-block
    .videoz {
      float: left;
      width: 400px;
      height: 225px;
      position: relative
      .play {
        position: absolute;
        width: 72px;
        height: 72px;
        left: 50%;
        top: 50%;
        margin-left: -36px;
        margin-top: -36px
      }
    }
    .video-style {
      width: 100%;
      height: 100%;
      border-radius: 16px;
      object-fit: inherit
    }
    .pic-style {
      float: left;
      width: 780px;
      height: 225px;
      background: #FFFFFF;
      border-radius: 16px;
      margin-left: 20px
      .pics {
        display:inline-block;
        padding: 0 20px 20px;
        img {
          width: 176px;
          height: 66px;
          float: left;
          margin-right: 12px
          &:nth-child(4n) {
            margin-right: 0;
            margin-bottom: 11px
          }
          &:last-child {
            margin-bottom: 0
          }
        }
      }
    }
  }
  .companyAndCollege {
    margin-top: 30px;
    display: inline-block
    .total-pic {
      width: 590px;
      background: #FFFFFF;
      border-radius: 16px;
      margin-right: 20px;
      float:left
      &:last-child {
        margin-right: 0
      }
      .pic-item {
        padding: 0 20px;
        font-size: 0;
        img {
          margin-bottom: 10px;
          margin-right: 10px
          &:nth-child(even) {
            margin-right: 0
          }
        }
      }
      .concat {
        display:flex;
        align-items: center
        border-top: 1px solid #F1F1F1;
        height: 62px;
        justify-content: center;
        cursor:pointer
        span {
          font-size: 18px;
          font-family: SourceHanSansCN-Regular, SourceHanSansCN;
          font-weight: 400;
          color: #4676FE;
          border-bottom: 1px solid transparent
        }
        img {
          width: 22px;
          height: 14px;
          margin-left: 10px
        }
        .hezuo2 {
          display: none
        }
        &:hover {
          span {
            color: #1D45B8;
            border-bottom: 1px solid #1D45B8
          }
          .hezuo {
            display: none
          }
          .hezuo2 {
            display:block
          }
        }
      }
    }
  }
  .cooperation{
    display: inline-block;
    margin-top: 32px
    .cooperation-item {
      width: 590px;
      background: #FFFFFF;
      border-radius: 16px;
      float: left;
      margin-right: 20px;
      &:last-child {
        margin-right: 0
      }
      .cooperation-item-pic{
        display: inline-block;
        padding: 0 20px;
        font-size: 0;
        margin-bottom: 9px;
        /deep/ .slick-list {
          width: 550px
        }
        /deep/ .slick-slide {
          div {
            width: 176px;
            height: 58px;
            margin-right: 11px;
            margin-bottom: 11px
          }
        }
        img {
          width: 176px;
          height: 58px;
          margin-right: 11px;
          margin-bottom: 11px;
          cursor:pointer;
          outline: none;
          border: none
          &:nth-child(3n) {
            margin-right: 0
          }
        }
      }
    }
  }
  .submit-success-dialog {
    /deep/ .el-dialog {
      width: 240px;
      height: 80px;
      background: #FFFFFF;
      box-shadow: 0px 20px 40px 0px rgba(0, 0, 0, 0.16);
      border-radius: 16px;
    }
    /deep/ .el-dialog__header {
      padding: 0
    }
    /deep/ .el-dialog__body {
      padding: 0
    }
    .submit-success {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20px;
      font-family: SourceHanSansCN-Regular, SourceHanSansCN;
      font-weight: 400;
      color: #101010;
      height: 80px;
      img {
        width: 40px;
        height: 40px;
        margin-right: 20px
      }
    }
  }
  .dialog-show {
    /deep/ .el-dialog {
      width: 690px;
      height: 390px;
      border-radius: 30px;
      position: absolute;
      left: 50%;
      margin-left: -345px;
      top: 50%;
      margin-top: -195px !important;
      background: transparent
    }
    /deep/ .el-dialog__header {
      padding: 0
    }
    /deep/ .el-dialog__body {
      padding: 0
    }
    .dialog-pic {
      position: relative;
      width: 690px;
      height: 390px;
      border-radius: 30px;
      .close {
        width: 26px;
        height: 26px;
        position: absolute;
        z-index: 99;
        cursor:pointer;
        margin-left: 10px
      }
    }
  }
}
</style>